{% extends "admin42/platformmgr/base.html" %}
{% load admin_utils %}
{% block main_content %}
<div id="platform-clusters-list" class="p20">
    <bk-alert type="warning" title="Admin42 仅保留查看集群信息功能，操作类功能请走 平台管理 - 应用集群 - 集群列表 入口" class="mb15"></bk-alert>

    <bk-table :data="data" :cell-class-name="cellStyleCallback">
        <bk-table-column type="expand" width="30">
            <template slot-scope="props">
                <bk-table :data="props.row.api_servers" :outer-border="false">
                    <bk-table-column type="index" label="序列" width="60"></bk-table-column>
                    <bk-table-column prop="host" label="主机地址"></bk-table-column>
                </bk-table>
            </template>
        </bk-table-column>
        <bk-table-column label="集群名称" width="120">
            <template slot-scope="props">
                <bk-button class="ml5" theme="primary" text @click="handleView(props.row)">$[ props.row.name ]</bk-button>
            </template>
        </bk-table-column>
        <bk-table-column label="集群类型" prop="type" width="100">
            <template slot-scope="props">
                <span v-if="props.row.type == 'normal'">普通</span>
                <span v-if="props.row.type == 'virtual'">虚拟</span>
            </template>
        </bk-table-column>
        <bk-table-column label="集群 ID" width="150">
            <template slot-scope="props">
                <span v-if="props.row.annotations.bcs_cluster_id"> $[ props.row.annotations.bcs_cluster_id ] </span>
                <span v-else>--</span>
            </template>
        </bk-table-column>
        <bk-table-column label="集群描述" prop="description"></bk-table-column>
        <bk-table-column label="特性标志" min-width="280">
            <template slot-scope="props">
                <div class="mt15 mb15">
                    <div v-for="ff in featureFlagList" style="display: flex">
                        <bk-tag v-if="hasFeatureFlag(props.row, ff.value)" theme="success">✔ $[ ff.text ]</bk-tag>
                        <bk-tag v-else theme="danger">✘ $[ ff.text ]</bk-tag>
                    </div>
                </div>
            </template>
        </bk-table-column>
        <bk-table-column label="节点" min-width="250">
            <template slot-scope="props">
                <div class="mt15 mb15">
                    <div v-for="(node, idx) in props.row.nodes" style="display: flex">
                        <bk-tag v-show="idx < 5">$[ node ]</bk-tag>
                    </div>
                    <span class="ml10">共计 $[ props.row.nodes.length ] 个节点</span>
                    <bk-button
                        theme="primary" text class="ml10"
                        v-if="props.row.nodes.length > 5"
                        v-bk-tooltips="{content: props.row.nodes.join('<br>'), allowHTML: true}"
                    >查看更多</bk-button>
                </div>
            </template>
        </bk-table-column>
    </bk-table>

    <!-- 查看集群详情用弹窗 -->
    <bk-dialog
        v-model="dialog.visible"
        header-position="left"
        width="800"
        :mask-close="true"
        :show-footer="false"
    >
        <div slot="header">应用集群详情</div>
        <bk-form :label-width="140" :model="dialog.form">
            <bk-form-item label="集群名称">
                <bk-input v-model="dialog.form.name" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="集群类型">
                <bk-select v-model="dialog.form.type" disabled="true">
                    <bk-option
                        v-for="type in clusterTypeList"
                        :key="type.value"
                        :id="type.value"
                        :name="type.text">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="集群描述">
                <bk-input v-model="dialog.form.description" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="应用访问类型">
                <span>$[ exposedURLTypeToText(dialog.form.exposed_url_type) ]</span>
            </bk-form-item>
            <bk-form-item label="子路径根域名">
                <json-pretty
                    :data="dialog.form.ingress_config.sub_path_domains"
                    show-length highlight-mouseover-node :deep="2"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="子域名根域名">
                <json-pretty
                    :data="dialog.form.ingress_config.app_root_domains"
                    show-length highlight-mouseover-node :deep="2"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="集群出口 IP" desc="用于指引用户配置独立域名的解析, 如果集群使用云厂商的 clb 做流量控制, 那么这里应当填对应的 vip">
                <bk-input v-model="dialog.form.ingress_config.frontend_ingress_ip" disabled="true"></bk-input>
            </bk-form-item>
            <bk-form-item label="注解" required>
                <json-pretty
                    :data="dialog.form.annotations"
                    show-length highlight-mouseover-node :deep="2"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="特性标志">
                <div v-for="ff in featureFlagList" style="display: flex">
                    <bk-tag v-if="hasFeatureFlag(dialog.form, ff.value)" theme="success">✔ $[ ff.text ]</bk-tag>
                    <bk-tag v-else theme="danger">✘ $[ ff.text ]</bk-tag>
                </div>
            </bk-form-item>
            <bk-form-item label="数字证书认证机构（cert-authority）">
                <bk-input
                    v-if="dialog.form.ca_data"
                    type="textarea"
                    rows="5"
                    v-model="dialog.form.ca_data"
                    disabled="true"
                ></bk-input>
                <span v-else>--</span>
            </bk-form-item>
            <bk-form-item label="客户端证书（client-cert）">
                <bk-input
                    v-if="dialog.form.cert_data"
                    type="textarea"
                    rows="5"
                    v-model="dialog.form.cert_data"
                    disabled="true"
                >
                </bk-input>
                <span v-else>--</span>
            </bk-form-item>
            <bk-form-item label="客户端密钥（client-key）">
                <bk-input
                    v-if="dialog.form.key_data"
                    type="textarea"
                    rows="5"
                    v-model="dialog.form.key_data"
                    disabled="true"
                >
                </bk-input>
                <span v-else>--</span>
            </bk-form-item>
            <bk-form-item label="集群 Token" :required="false">
                <bk-input
                    v-if="dialog.form.token_value"
                    type="textarea"
                    rows="5"
                    v-model="dialog.form.token_value"
                    disabled="true"
                >
                </bk-input>
                <span v-else>--</span>
            </bk-form-item>
            <bk-form-item label="端口配置">
                <bk-alert type="info" title="用于生成应用访问地址"></bk-alert>
                <bk-input
                    placeholder="使用 http 协议访问 SaaS 时, 使用的端口号"
                    type="number"
                    v-model="dialog.form.ingress_config.port_map.http"
                >
                    <template slot="prepend">
                        <div class="group-text">HTTP</div>
                    </template>
                </bk-input>
                <bk-input
                    placeholder="使用 https 协议访问 SaaS 时, 使用的端口号"
                    type="number"
                    v-model="dialog.form.ingress_config.port_map.https"
                >
                    <template slot="prepend">
                        <div class="group-text">HTTPS</div>
                    </template>
                </bk-input>
            </bk-form-item>
            <bk-form-item label="默认 nodeSelector" desc="限制应用的构建、运行均使用此 nodeSelector 来筛选节点">
                <json-pretty
                    :data="dialog.form.default_node_selector"
                    show-length highlight-mouseover-node :deep="0"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="默认 tolerations" desc="让应用的构建、运行使用此 tolerations 来容忍节点的污点（taints）">
                <json-pretty
                    :data="dialog.form.default_tolerations"
                    show-length highlight-mouseover-node :deep="0"
                ></json-pretty>
            </bk-form-item>
            <bk-form-item label="默认 Ingress 域名模板（保留选项）">
                <bk-input v-model="dialog.form.ingress_config.default_ingress_domain_tmpl" disabled="true"></bk-input>
            </bk-form-item>
        </bk-form>
    </bk-dialog>
</div>

{% endblock %}


{% block main_script %}
<script>
    /* beautify preserve:start */
    const clusterTypeList = {{ cluster_type_list | to_json }}
    const featureFlagList = {{ feature_flag_list | to_json }}
    /* beautify preserve:end */
    const DomainSchema = {
        type: "array",
        items: {
            type: "object",
            properties: {
                name: { type: "string"},
                reserved: { type: "boolean"},
                https_enabled: { type: "boolean"}
            },
            required: ["name", "reserved", "https_enabled"],
        },
        uniqueItems: true
    }

    const URLRouter = {list: decodeURI("{% url 'wl_api.clusters' %}")}

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#platform-clusters-list",
            delimiters: ['$[', ']'],
            mixins: [SubmitMixin],
            data: function() {
                return {
                    data: [],
                    dialog: {
                        visible: false,
                        form: {
                            ingress_config: {
                                port_map: {},
                                sub_path_domains: [],
                                app_root_domains: [],
                                default_ingress_domain_tmpl: ''
                            },
                            annotations: {},
                            feature_flags: {},
                            default_node_selector: {},
                            default_tolerations: []
                        },
                        row: undefined
                    },
                }
            },
            mounted: function () {
                this.fetchClusterList()
            },
            methods: {
                fetchClusterList: async function () {
                    const el = this.$bkLoading({title: '加载中'})
                    try {
                        await this.$http.get(URLRouter['list']).then(res => {
                            this.data = res
                        })
                    } finally {
                        el.hide = true
                    }
                },
                handleView: function(row) {
                    this.dialog.row = row
                    this.dialog.form = { ...row, ingress_config: {...row.ingress_config} }
                    this.dialog.visible = true
                },
                // 判断当前集群是否支持某特性
                hasFeatureFlag: function (row, ff) {
                    return row.feature_flags[ff]
                },
                cellStyleCallback: function({ row, column, rowIndex, columnIndex }) {
                    if (column.label === "接入层配置" || column.label === '注解')
                        return 'json-view'
                },
                handleRequestError: function (res) {
                    console.error(res)
                },
                exposedURLTypeToText: (t) => {
                    switch (t) {
                        case 1:
                            return '子路径(1)'
                        case 2:
                            return '子域名(2)'
                        default:
                            return `未知(${t})`
                    }
                }
            },
        })
    })
</script>
{% endblock %}
